<template>
	<view>
		<u-picker mode="region" v-model="pickerShow" @confirm="pickArea"></u-picker>
		<u-modal v-model="modelShow" :content="ModelContent" @confirm="toWriteUserInfo" :show-cancel-button="true" @cancel="modelShow=false"></u-modal>
		<view class="head">
			<view class="head_title">
				<view class="head_title_big">
					新冠疫苗接种机构
				</view>
				<view class="head_title_label">
					预约速查
				</view>
			</view>
			<view class="head_content">
				<view class="head_content_little">
					<text>接种机构</text>
					<text style="color: #fff;">5789</text>
					<text>家</text>
					<view class="" style="margin-left: 20rpx;">
						已覆盖24个省214个城市
					</view>
				</view>
				<view class="head_content_label" @click="handleToFeedback">
				</view>
			</view>
			<view class="swiperBox">
				 <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" indicator-active-color="#98C2FF">
					<swiper-item v-for="item in NewsList" :key="item.article_id">
						<view class="swiper-item ">
							<view class="swiper_title">
								{{item.title}}
							</view>
							<view class="swiper_content">
								<text>{{item.author_name}}</text>
								<text>{{item.update_time | monthFilter}}</text>
								<text>{{item.update_time | dateFilter}}</text>
							</view>
						</view>
					</swiper-item>
					
				</swiper>
			</view>
		</view>
		<view class="iconBox">
			<view url="" class="iconItem" @click="handleToYimiaojinzhan">
				<image src="../../static/vaccineIcon.png" mode=""></image>
				<view>疫苗进展</view>
			</view>
			<view  class="iconItem" @click="toIndex">
				<image src="../../static/ChinaIcon.png" mode=""></image>
				<view>国内疫情</view>
			</view>
			<navigator url="/pages/foreign/foreign" class="iconItem" @click="toForeign">
				<image src="../../static/foreignIcon.png" mode=""></image>
				<view>国外疫情</view>
			</navigator>
			<navigator url="" class="iconItem" @click="handleTojkm">
				<image src="../../static/healthIcon.png" mode=""></image>
				<view>健康码</view>
			</navigator>
			
		</view>
		<view class="addressBox">
			<view class="addressBox_left">
				<view class="addressBox_left_name" >
					{{area}}
				</view>
				<view class="addressBox_left_icon" @click="pickerShow=true" >
				</view>
			</view>
			<view class="addressBox_right" @click="toMyyuyue">
				<view class="addressBox_right_icon">
					
				</view>
				<view class="addressBox_right_name" @click="toMyyuyue">

				</view>
			</view>
		</view>
		<view class="contentBox" v-for="item in HospitalList" :key='item._distance' @click="toUseryuyue(item.name)">
			<view class="contentBox_head">
				<view class="head_left">
					<view class="head_left_icon">
					</view>
					<view class="head_left_title">
						{{item.name | nameFilter}}
					</view>
				</view>
				<view class="head_right">
					开放
				</view>
			</view>
			<view class="contentBox_phone">
				<view class="phone_label">
					联系电话：
				</view>
				<view class="phone_num">
					{{item.phone | telFilter}}
				</view>
			</view>
			<view class="contentBox_address">
				<view class="address_label">
					地址：
				</view>
				<view class="address_content">
					{{item.address | addressFilter}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		filters:{
			telFilter(data){
				if(!data){
					return '未公布'
				}else{
					return data
				}
			},
			monthFilter(value){

				value = value*1000
				  let data= new Date(value);
				   let year = data.getFullYear();
				   let month = data.getMonth() + 1;
				   let day = data.getDate();
				   let h = data.getHours();
				   let mm = data.getMinutes();
				   let s = data.getSeconds();
				   month = month >= 10 ? month : "0" + month;
				   day = day >= 10 ? day : "0" + day;
				   h = h >= 10 ? h : "0" + h;
				   mm = mm >= 10 ? mm : "0" + mm;
				   s = s >= 10 ? s : "0" + s;
				   return `${month}/${day}`;
			},
			dateFilter(value){
					value = value*1000
					  let data= new Date(value);
					   let year = data.getFullYear();
					   let month = data.getMonth() + 1;
					   let day = data.getDate();
					   let h = data.getHours();
					   let mm = data.getMinutes();
					   let s = data.getSeconds();
					   month = month >= 10 ? month : "0" + month;
					   day = day >= 10 ? day : "0" + day;
					   h = h >= 10 ? h : "0" + h;
					   mm = mm >= 10 ? mm : "0" + mm;
					   s = s >= 10 ? s : "0" + s;
					   return `${h}:${mm}`;
			},
			addressFilter(value){
				if(value.length > 15){
					return value.slice(0,15) + "..."
				}
				return value
			},
			nameFilter(value){
				if(value.length > 10){
					return value.slice(0,11) + '...'
				}
				return value
			}
		},
		data() {
			return {
				area:"北京海淀区",
				pickerShow:false,
				indicatorDots: false,
				autoplay: true,
				interval: 5000,
				duration: 500,
				NewsList:[],
				HospitalList:[],
				modelShow:false,
				ModelContent:""
			};
		},
		onLoad(){
			this.getNewsList(),
			this.getHospitalData()
		},
		methods:{ 
			toMyyuyue(){
				uni.getStorage({
					key:'vaccine',
					success:res=>{
						uni.navigateTo({
							url:'/pages/myyuyue/myyuyue'
						})
					},
					fail:err=>{
						uni.showToast({
							title:"没有预约记录，请点击医院预约",
							icon:"none"
						})
					}
				})
			},
			toWriteUserInfo(){
				uni.navigateTo({
					url:'/pages/writeUserInfo/writeUserInfo'
				})
			},
			toUseryuyue(name){
				
				uni.getStorage({
					key:"username",
					success:res=>{
						uni.setStorage({
							key:'hospital',
							data:name
						})
						uni.navigateTo({
							url:"/pages/yimiaotips/yimiaotips"
						})
					},
					fail:err=>{
						this.ModelContent = "您没有填写个人信息，是否现在填写？"
						this.modelShow = true
						uni.setStorage({
							key:'hospital',
							data:name
						})
					}
				})
			},
			handleToYimiaojinzhan(){
				uni.navigateTo({
					url:'/pages/yimiaojinzhan/yimiaojinzhan'
				})
			},
			handleTojkm(){
				plus.runtime.openURL('https://news.qq.com/zt2020/page/querycode.htm?ADTAG=ymmap')
			},
			handleToFeedback(){
				plus.runtime.openURL('https://wj.qq.com/s2/7797244/091d/')
			},
			confirm(e){
				this.city = e[0].label
				
			},
			getNewsList(){
				uni.request({
					url:"https://view.inews.qq.com/share/topic_news",
					method:'GET',
					data:{
						id:'TWF20201110003549IO'
					}
				}).then(res=>{
					res = res[1].data.cells[0].topic_info.article_list
					for(var i=0;i<3;i++){
						this.NewsList.push(res[i])
					}
				})
			},
			creating(){
				uni.showToast({
					title:'模块开发中',
					icon:'none'
				})
			},
			toIndex(){
				uni.switchTab({
				      url: '/pages/index/index'
				});
			},
			toForeign(){
				uni.switchTab({
					url:'/pages/foreign/foreign'
				})
			},
			getHospitalData(){
				uni.request({
					url:"https://api.yonyoucloud.com/apis/dst/hospitalInfoQuery/hospitalInfoQuery",
					header:{
						"authoration":"apicode",
						"apicode":"dd8de86a38814347b069055a1f572a4e"
					},
					data:{
						name:this.area
					},
					method:'GET'
				}).then(res=>{
					this.HospitalList = res[1].data.result
				})
			},
			pickArea(e){
				if(e.province.label == "北京市" || e.province.label == "天津市" || e.province.label == "上海市" || e.province.label == "重庆市"){
					this.area = e.province.label + e.area.label
				}else{
					this.area = e.province.label+ e.city.label
				}
				this.getHospitalData()
			}
		}
	}
</script>

<style lang="scss" scoped>
.contentBox{
	height: 220rpx;
	margin: 20rpx 40rpx 0 40rpx ;
	border-radius:20rpx;
	box-shadow: 0 0  5rpx #77AEFF;
	padding: 34rpx 40rpx;
	.contentBox_head{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.head_left{
			display: flex;
			justify-content: start;
			align-items: center;
			.head_left_icon{
				height: 24rpx;
				width: 24rpx;
				background: url(https://mat1.gtimg.com/qqcdn/qqued/yimiaomap/icon_hos.png);
				background-size: 100% 100%;
				margin-right: 8rpx;
			}
			.head_left_title{
				font-size: 36rpx;
				color: #000;
			}
		}
		.head_right{
			height: 36rpx;
			width: 88rpx;
			text-align: center;
			margin-right: 8rpx;
			background-color: #66c15b;
			color: #fff;
			border-radius: 20rpx;
			font-size: 24rpx;
		}
	}
	.contentBox_phone{
		display: flex;
		justify-content: start;
		margin-top: 16rpx;
		.phone_label{
			font-size: 24rpx;
			color: #8a8a8a;
			margin-right: 6rpx;
		}
		.phone_num{
			font-size: 24rpx;
			color: #2e2e2e;
		}
	}
	.contentBox_address{
		display: flex;
		justify-content: start;
		margin-top: 16rpx;
		font-size: 24rpx;
		color: #8a8a8a;
		.address_label{
			margin-right: 6rpx;
		}
	}
}
.addressBox{
	display: flex;
	height: 86rpx;
	margin: 40rpx 40rpx 0 40rpx;
	border-radius:20rpx;
	box-shadow: 0 0  5rpx #77AEFF;
	justify-content: space-between;
	.addressBox_left{
		display: flex;
		justify-content: start;
		align-items: center;
		padding-left: 20rpx;
		font-size:28rpx;
		color: #4380ea;
		.addressBox_left_icon{
			height: 32rpx;
			width: 32rpx;
			background: url(https://mat1.gtimg.com/qqcdn/qqued/yimiaomap/select_sharp.png) no-repeat ;
			background-size: 80% 80%;
			background-position: 100% 100%;
			margin-left: 10rpx;
		}
	}
	.addressBox_right{
		display: flex;
		justify-content: end;
		align-items: center;
		padding-right: 20rpx;
		font-size: 28rpx;
		color: #4380ea;
		.addressBox_right_icon{
			height: 46rpx;
			width: 186rpx;
			background: url(../../static/yuyue.png) no-repeat ;
			background-size: 100% 100%;
			background-position: 100% 100%;
			margin-right: 10rpx;
		}
		
	}
}
.iconBox{
	display: flex;
	justify-content: center;
	margin-top: 50rpx;
	.iconItem{
		height: 124rpx;
		width: 112rpx;
		margin: 0 30rpx;
		text-align: center;
		image{
			width: 58rpx;
			height: 58rpx;
		}
		
	}
}
.head{
	height: 372rpx;
	padding:40rpx 40rpx 0 40rpx;
	background-image: url(https://mat1.gtimg.com/qqcdn/qqued/yimiaomap/head_bg.png);
	background-size: 100% 100%;
	.head_title{
		display: flex;
		justify-content: start;
		.head_title_big{
			font-size: 52rpx;
			color: #fff;
			font-weight: 600;
		}
		.head_title_label{
			background-color: #fc7575;
			color: #fff;
			font-size: 28rpx;
			height: 48rpx;
			width: 146rpx;
			transform: skew(-8deg);
			text-align: center;
			padding-top: 4rpx;
			border-radius: 8rpx;
			margin-left: 10rpx;
			margin-top: 20rpx;
		}
	}
	.head_content{
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
		margin-bottom: 10rpx;
		.head_content_little{
			font-size: 24rpx;
			color: #3a76d0;
			display: flex;
			justify-content: start;
		}
		.head_content_label{
			height: 30rpx;
			width: 128rpx;
			background-image: url(https://mat1.gtimg.com/qqcdn/qqued/yimiaomap/b_fankui.png);
			background-size: 100% 100%;
			margin-top: 4rpx;
		}
	}
	.swiperBox{
		height: 216rpx;
		border-radius: 20rpx;
		background-color: #fff;
		padding: 32rpx;
		box-shadow: 0 0  30rpx #77AEFF;
		swiper{
			height: 216rpx;
		}
		.swiper_title {
			font-size: 32rpx;
			color: #000000;
			height: 88rpx;
		}
		.swiper_content{
			display: flex;
			justify-content: start;
			margin-top: 20rpx;
			color: #8a8a8a;
			font-size: 24rpx;
			text{
				margin-right: 10rpx;
			}
		}
	}
}
</style>
